<template>
  <div>
    <div class="detialCharts" ref="detialCharts">
      <!-- 频谱图 -->
      <div class="detialChart" style="margin-bottom: -10px">
        <SpecView
          ref="specView"
          :mouseMove="specViewMouseMove"
          :mouseLeave="specViewMouseLeave"
          :mouseClick="specViewMouseClick"
          :xIntervalChange="specViewXIntervalChange"
          :xAxisMarkNum="10"
          :yAxisMarkNum="10"
          :drawCenterLine="false"
        />
        <!-- 控制显示最大、最小、平均 -->
        <div
          v-show="chartType == 0"
          class="linesCtl"
          :class="{ playback: isSaving }"
        >
          <!-- <div
              class="item"
              :class="{ active: isChange }"
              @click="isChange = !isChange"
            >
              切换
            </div>
            <div class="item" :class="{ active: showZaibo }" @click="changeZaibo">
              载波
            </div>
            <div class="item" v-show="!isSaving" @click="savingDialog = true">
              存储
            </div> -->
          <div class="item" v-show="isSaving" @click="stopSaving">
            (已存储：{{ (fileSize / 1024).toFixed(2) }} kB)停止
          </div>
          <!-- <div class="item" @click="changePlayStatus">
            {{ isPlay ? "暂停" : "继续" }}
          </div> -->
          <div class="item" @click="cutPicture($refs.detialCharts)">快照</div>
          <!-- <div
                class="item"
                :class="{ active: isMeasureX }"
                @click="changeMeasure('x')"
              >
                测X
              </div> -->
          <!-- <div
                class="item"
                :class="{ active: isMeasureY }"
                @click="changeMeasure('y')"
              >
                测量
              </div> -->
          <!-- <div
            class="item"
            :class="{ active: item.isChoosed }"
            @click="changeDetectType(item.value)"
            v-for="item in typeOptions"
            :key="item.value"
          >
            {{ item.label }}
          </div> -->
        </div>
      </div>
      <!-- 瀑布图 -->
      <div class="detialChart" v-show="!showZaibo">
        <PubuView
          :mouse-move="pubuViewMouseMove"
          :zoomYAxisInMouseWheelOnSerires="true"
          :xIntervalChange="pubuViewXIntervalChange"
          ref="pubuView"
        />
      </div>
      <div class="tag">
        <span v-if="scanTime && realPointNum"
          >每秒帧数：{{ (1000 / scanTime).toFixed(0) }} &nbsp; 帧长：{{
            realPointNum
          }}
          点 &nbsp; 屏显：{{
            ((xAxisMax - xAxisMin) / pointNum).toFixed(2)
          }}
          kHz/px</span
        >
      </div>
    </div>

    <el-dialog
      title="扫频存储"
      :close-on-click-modal="false"
      :modal="true"
      :center="true"
      v-dialogDrag
      :visible.sync="savingDialog"
      width="20%"
    >
      <div class="form" style="display: flex">
        <div class="label" style="width: 120px">存储时间(s)：</div>
        <el-input-number
          style="width: 150px"
          v-model="saveForm.time"
          size="small"
          :min="5"
          :max="60"
          :controls="false"
        >
        </el-input-number>
      </div>
      <span></span>
      <span slot="footer">
        <el-button type="primary" @click="startSaving">确认</el-button>
      </span>
    </el-dialog>

    <!-- <el-dialog
      :title="chartType == 1 ? '文件回放' : '参数配置'"
      class="settingDialog"
      top="50px"
      :close-on-click-modal="false"
      :modal="true"
      :center="true"
      v-dialogDrag
      :visible.sync="showSetting"
      width="40%"
    >
      <FilePlayback
        ref="filePlayback"
        :deviceId="deviceId"
        v-if="chartType == 1"
      />

      <template v-else>
        <div class="formItem">
          <div class="label">rbw：</div>
          <el-input-number
            v-model="settingForm.rbw"
            size="small"
            :controls="false"
            @blur="setPinpu('rbw')"
            @keyup.native.enter="setPinpu('rbw')"
          >
          </el-input-number>
        </div>
        <div class="formItem">
          <div class="label">平滑次数：</div>
          <el-input-number
            v-model="settingForm.smooth"
            size="small"
            :controls="false"
            @blur="setPinpu('smooth')"
            @keyup.native.enter="setPinpu('smooth')"
          >
          </el-input-number>
        </div>
        <div class="formItem">
          <div class="label">外触发：</div>
          <el-input-number
            v-model="settingForm.chufa"
            size="small"
            :controls="false"
            @blur="setPinpu('chufa')"
            @keyup.native.enter="setPinpu('chufa')"
          >
          </el-input-number>
        </div>
      </template>
    </el-dialog> -->
  </div>
</template>

<script>
import SpecView from '@/components/chart/SpecView.vue'
import PubuView from '@/components/chart/PubuView.vue'
// import FilePlayback from './filePlayback.vue'
import { cutPicture } from '@/utils/cutPictures'
/* import {
    getParamsAPI,
    getPubuMaxMinAPI,
    sweepConfigAPI,
    changeDetectTypeAPI,
    startSaveAPI,
    stopSaveAPI,
    changeModeAPI,
    getSaveStatusAPI,
    chufaConfigAPI,
    rbwConfigAPI,
    smoothConfigAPI,
    startSignalDetectAPI,
    stopSignalDetectAPI,
    getZaiboInfoAPI,
    setPlaybackSpeedAPI
  } from '@/api/charts' */
export default {
  name: 'WebGLChartDetial',
  data () {
    return {
      chartType: 0,
      showDetialDialog: false,
      initXAxisMin: null,
      initXAxisMax: null,

      peakFreq: null,

      initStart: 950000,
      initEnd: 2150000,

      xAxisMin: 950,
      xAxisMax: 2150,

      pubuMinFull: -110,

      pointNum: 2000, // 频谱图点数
      pubuPointNum: 1000, // 瀑布图列数
      fitFlag: false, // 是否要自适应
      signalFlag: false, // 是否切换了信号源
      temXEnd: 0, // 用来对比后端有没有上新的数
      maxYVal: -500, // 用来计算频谱图Y轴的最大值
      minYVal: 500, // 用来计算频谱图Y轴的最小值

      maxYPubu: -500, // 用来计算瀑布图Y轴的最大值
      minYPubu: 500, // 用来计算瀑布图Y轴的最小值

      formatStatus: false, // 是否需要格式化X轴

      getNewData: true, // 是否得到了新的数据包 => 默认为true

      isChange: false, // 是否点击了切换按钮
      temMax: 1000, // 用于计算格式化时x坐标的临时最大值
      timerFlag: null, // 用于接收频谱x区间频繁发生变化时触发事件的定时器的id

      timer: null,

      center: 200, // 中心频点
      centerUnit: 'MHZ',
      span: 300, // 扫频宽度
      spanUnit: 'MHZ',

      settingForm: {
        smooth: 0, // 平滑次数
        chufa: 0, // 外触发
        rbw: 0 // 视频带宽
      },

      scanForm: {
        center: 0, // 中心频点
        rbw: 0, // 分辨率
        span: 0, // 带宽
        vbw: 0, // 视频带宽
        startFre: '', // 起始频率
        stopFre: '' // 终止频率
      },
      scanUnit: {
        center: 'MHz', // 中心频点单位
        span: 'MHz', // 扫频宽度单位
        rbw: 'Hz' // 分辨率率单位
      },
      typeOptions: [
        {
          label: '平均',
          value: '2',
          isChoosed: false
        },
        {
          label: '最大',
          value: '3',
          isChoosed: false
        },
        {
          label: '最小',
          value: '4',
          isChoosed: false
        }
      ],
      isSaving: false, // 是否正在存储
      showZaibo: false, // 是否展示载波检测列表
      isMeasureX: false, // 是否进行测量
      isMeasureY: false, // 是否进行测量
      currentPage: 1,
      pageSize: 10,
      zaiboList: [],
      selectedRow: null,
      columns: [
        {
          label: '中心频点(MHz)',
          value: 'center',
          width: ''
        },
        {
          label: '带宽(MHz)',
          value: 'bandwidth',
          width: ''
        },
        {
          label: '均值电平(dBm)',
          value: 'electLevel',
          width: ''
        },
        {
          label: '载噪比(db)',
          value: 'snr',
          width: ''
        },
        {
          label: '信道占用度(%)',
          value: 'percent',
          width: ''
        }
        /* {
            label: '信号帧类型',
            value: 'signalType',
            width: ''
          },
          {
            label: 'IP业务',
            value: 'ip',
            width: ''
          },
          {
            label: '信源编码',
            value: 'code',
            width: ''
          },
          {
            label: '信源加密类型',
            value: 'jiamiType',
            width: ''
          },
          {
            label: '明密特征',
            value: 'mingmi',
            width: ''
          },
          {
            label: '业务类型',
            value: 'yewuType',
            width: ''
          } */
      ],

      fileSize: 0, // 已存储文件大小
      isPlay: true, // 是否播放
      showSetting: false, // 参数配置弹窗显示隐藏

      // 左上角载波信息
      zaiBoForm: {
        bandwidth: '',
        center: '',
        snr: '',
        electLevel: ''
      },
      scanTime: null, // 扫描时间
      realPointNum: null, // 真正的点数

      isFirst: true, // 首次加载

      minBandWidth: 30, // 设备扫频范围最小限制
      maxBandWidth: 6000, // 设备扫频范围最大限制

      savingDialog: false, // 存储配置弹窗
      saveForm: {
        time: undefined
      },

      isReq: true, // 频谱缩放后是否要调用接口
      temprature: '', // 温度
      dian: '', // 电压

      maxArray: [], // 最大数组
      minArray: [], // 最小数组

      speed: 1,
      speedList: [1, 2, 4],
      mode: 'shiyu'
    }
  },
  mounted () {
    // this.test()
    // 设置频谱图最大Y轴区间
    this.$refs.specView.series.setMaxYInterval([-350, 250])

    // 设置瀑布图Y轴区间 => 影响瀑布图颜色
    // this.changeYRange(20, -120)
  },
  components: {
    SpecView,
    PubuView
    // FilePlayback
  },
  computed: {
    detectType () {
      const temArr = []
      this.typeOptions.forEach((item) => {
        if (item.isChoosed) temArr.push(item.value)
      })
      return temArr
    },
    filterZaiboList () {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.zaiboList.slice(start, end)
    }
  },
  watch: {
    /* chartType: {
      async handler (newVal) {
        try {
          if (newVal == 1) {
            // 回放模式 => 调接口告诉后端停止推送实时数据
            await changeModeAPI(newVal)
            this.speed = 1
          } else if (newVal == 0) {
            // 扫频模式 => 调接口告诉后端继续推送实时数据
            await changeModeAPI(newVal)
            this.getParams()
          }

          setTimeout(() => {
            // 清空频谱、瀑布图
            this.$refs.specView.clearChart()
            this.$refs.pubuView.clearChart()
          }, 500)
        } catch (error) {
          console.log(error)
        }
      }
    }, */
    // 文件回放时 y轴自适应逻辑
    xAxisMin: {
      handler (newVal) {
        if (this.chartType == 1) {
          this.changeFitFlag()
        }
      },
      immediate: true
    },
    xAxisMax: {
      handler (newVal) {
        if (this.chartType == 1) {
          this.changeFitFlag()
        }
      },
      immediate: true
    },
    formatStatus: {
      handler (newVal) {
        if (newVal) {
          this.$refs.specView.series.setXAxisMarkFormatter((value) => {
            return (
              (this.xAxisMin +
                (this.xAxisMax - this.xAxisMin) * (value / this.pointNum)) /
              1000
            ).toFixed(2)
          })

          const temStart =
            (
              ((this.xAxisMin - this.initStart) * this.pointNum) /
              (this.initEnd - this.initStart)
            ).toFixed(0) * 1
          const temEnd =
            (
              ((this.xAxisMax - this.initStart) * this.pointNum) /
              (this.initEnd - this.initStart)
            ).toFixed(0) * 1

          this.$refs.specView.series.setMaxXInterval([0, this.pointNum])
          this.$refs.specView.series.changeXInterval([temStart, temEnd])
        } else {
          this.$refs.specView.series.setXAxisMarkFormatter((value) => {
            return Number(value / 1000).toFixed(2)
          })

          this.$refs.specView.series.setMaxXInterval([
            this.initStart,
            this.initEnd
          ])

          this.$refs.specView.series.changeXInterval([
            this.xAxisMin,
            this.xAxisMax
          ])
        }
      }
    },
    showDetialDialog (newVal) {
      if (newVal) {
        this.$nextTick(() => {
          // 阻止默认的右键菜单弹出
          this.$refs.detialCharts.addEventListener(
            'contextmenu',
            function (event) {
              event.preventDefault()
            }
          )
        })
      }
    },
    'zaiboList.length' (newVal) {
      // console.log('载波列表记录条数', newVal)
      if (Math.ceil(newVal / this.pageSize) < this.currentPage) {
        this.currentPage = Math.ceil(newVal / this.pageSize)
      }
    },
    speed (newVal) {
      console.log('切换倍速', newVal)

      this.setPlaybackSpeed(newVal)
    }
  },
  props: ['deviceIp', 'devicePort', 'deviceId'],
  beforeDestroy () {
    this.chartType = 0
    // changeModeAPI(0)
    if (this.showZaibo) {
      this.changeZaibo()
    }
    clearTimeout(this.timerFlag)
    this.timerFlag = null

    // 测试代码清除轮询id
    clearTimeout(this.timer)
    this.timer = null
  },
  methods: {
    cutPicture,
    formatDate (timestamp) {
      const date = new Date(timestamp)

      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    test () {
      // 测试代码
      // 手动设置X轴最大区间 => 正常是参数查询查到的
      this.initXAxisMax = 1900000
      this.initXAxisMin = 1400000
      this.peakFreq = 1650000 // 信号峰值所在频率
      const peakValue = -5 // 信号峰值强度
      const peakRange = 600 // 信号峰值频率到底噪频率的差值
      const peakSpeed = 7 // 降低的速度
      const noiseFloor = -95 // 底噪基准值
      const noiseRange = 8 // 底噪上下波动的区间
      // 设置x轴最大缩放范围
      this.changeMaxInterval()
      // 设置频谱图当前Y轴区间
      this.$refs.specView.series.setMaxYInterval([-30, 80])
      // 设置频谱图最大Y轴区间
      this.$refs.specView.series.changeYInterval([-30, 80])
      // 设置瀑布图Y轴区间 => 影响瀑布图颜色
      this.changeYRange(80, -30)
      this.timer = setInterval(() => {
        if (this.isPlay) {
          const temArr = []
          const freqInterval = (1900000 - 1400000) / (3000 - 1)

          if (this.peakFreq >= 1900000) {
            this.peakFreq = 1400000
          } else {
            this.peakFreq += 300
          }

          for (let index = 0; index < 3000; index++) {
            let value
            const freq = 1400000 + index * freqInterval
            if (Math.abs(freq - this.peakFreq) < peakRange) {
              // 峰值区域，根据距离峰值的远近计算值
              value = peakValue - Math.abs(freq - this.peakFreq) / peakSpeed // 这里5是控制峰值下降速度的参数，可根据需要调整
            } else {
              // 底噪区域，生成随机值
              value = noiseFloor + Math.random() * noiseRange * 2 - noiseRange
            }
            temArr.push(value)
          }
          this.drawChart(
            {
              fFTRealtime: temArr,
              fFTAvg: temArr,
              pubuData: temArr
            },
            1400000,
            1900000,
            1400000,
            1900000
          )
        }
      }, 50)
    },
    // 绘图方法 => 重写版，可同时绘制1、2、3条曲线
    drawChart (chartData, startFreq, endFreq, initStart, initEnd) {
      // console.log('图谱数据：', chartData)
      if (!chartData.fFTRealtime || !chartData.fFTRealtime.length) return

      if (
        this.initStart !== initStart ||
        this.initEnd !== initEnd ||
        this.isFirst
      ) {
        this.initStart = initStart
        this.initEnd = initEnd
        /* // 重新设置折线图/瀑布图x轴最大区间
          // this.changeMaxInterval()
          this.xAxisMin = startFreq
          this.xAxisMax = endFreq
          // 重新设置折线图/瀑布图x轴当前区间
          this.changeInterval() */

        this.initXAxisMax = initEnd
        this.initXAxisMin = initStart
        // 设置x轴最大缩放范围
        this.changeMaxInterval(chartData.mode)
        if (this.mode != chartData.mode) {
          this.mode = chartData.mode
        }
      }

      if (this.xAxisMax !== endFreq || this.xAxisMin !== startFreq) {
        this.xAxisMin = startFreq
        this.xAxisMax = endFreq
        // 重新设置折线图/瀑布图x轴当前区间
        this.changeInterval(chartData.mode)
      }

      if (chartData.fFTRealtime.length !== this.pointNum || this.isFirst) {
        this.pointNum = chartData.fFTRealtime.length
      }

      if (chartData.pubuData.length !== this.pubuPointNum || this.isFirst) {
        this.pubuPointNum = chartData.pubuData.length
        this.$refs.pubuView.series.setColumn(this.pubuPointNum)
      }

      // 获取时间戳作为Y轴坐标传入
      const timestamp = new Date().getTime()

      // 图表实际的x、y数据
      const temArr1 = [] // 平均曲线
      const temArr2 = [] // 最大曲线
      const temArr3 = [] // 最小曲线
      const temArr4 = [] // 实时曲线
      const increase = (initEnd - initStart) / chartData.fFTRealtime.length
      const pubuIncrease = (endFreq - startFreq) / chartData.pubuData.length

      if (chartData.mode == 'shiyu') {
        // 时域图，每包都自适应
        const maxYVal = Math.max.apply(null, chartData.fFTAvg)
        const minYVal = Math.min.apply(null, chartData.fFTAvg)

        // 重新设置折线图Y轴区间 上下留 10% 的空余位置
        if (maxYVal && minYVal) {
          if ((this.maxYVal < maxYVal) || (this.minYVal > minYVal) || ((this.maxYVal - this.minYVal) / (maxYVal - minYVal)) > 1.1) {
            this.maxYVal = maxYVal
            this.minYVal = minYVal

            this.$refs.specView.series.setMaxYInterval([
              this.minYVal,
              this.maxYVal
            ])

            this.$refs.specView.series.changeYInterval([
              this.minYVal,
              this.maxYVal
            ])
          }
        }
      }

      // fitFlag标识变成true时 => 求曲线Y轴的最大最小值，实现Y轴自适应 => 自适应逻辑注释
      //   if (
      //     this.isFirst ||
      //     this.fitFlag
      //     /* (this.fitFlag && (this.temXEnd !== endFreq || this.signalFlag === true)) */
      //   ) {
      //     this.temXEnd = endFreq
      //     let subSubDataAvg = []

      //     if (chartData.fFTAvg) {
      //       subSubDataAvg = chartData.fFTAvg
      //     }

      //     // 异常数值排查
      //     /* subSubDataAvg.forEach((item, index) => {
      //       if (item > 100 || item < -100) {
      //         console.log(item, index)
      //       }
      //     }) */

      //     const maxYVal = Math.max.apply(null, subSubDataAvg)
      //     const minYVal = Math.min.apply(null, subSubDataAvg)

      //     const maxYPubu = Math.max.apply(null, chartData.pubuData)
      //     const minYPubu = Math.min.apply(null, chartData.pubuData)

      //     // 瀑布图添加数据 => 添加之前先根据最大最小值改变不同范围下的值的颜色显示
      //     this.maxYVal = maxYVal > this.maxYVal ? maxYVal : this.maxYVal
      //     this.minYVal = minYVal < this.minYVal ? minYVal : this.minYVal

      //     this.maxYPubu = maxYPubu > this.maxYPubu ? maxYPubu : this.maxYPubu
      //     this.minYPubu = minYPubu < this.minYPubu ? minYPubu : this.minYPubu

      //     setTimeout(() => {
      //       if (this.maxYVal == -500 || this.minYVal == 500) return
      //       const temVal = this.maxYVal - this.minYVal

      //       /* console.log(
      //         'Y轴自适应',
      //         this.minYVal,
      //         this.maxYVal
      //       ) */

      //       // 重新设置折线图Y轴区间 上下留 10% 的空余位置
      //       if (maxYVal && minYVal) {
      //         this.$refs.specView.series.setMaxYInterval([
      //           this.minYVal,
      //           this.maxYVal
      //         ])

      //         this.$refs.specView.series.changeYInterval([
      //           this.minYVal,
      //           this.maxYVal
      //         ])
      //       }

      //       this.changeYRange(this.maxYPubu, this.minYPubu)

      //       this.fitFlag = false
      //       this.maxYVal = -500
      //       this.minYVal = 500
      //       this.signalFlag = false
      //       this.isFirst = false
      //       this.maxArray = []
      //       this.minArray = []
      //     }, 1000)
      //   }

      // 动态计算最大保持和最小保持
      if (chartData.fFTRealtime) {
        this.typeOptions.forEach((item) => {
          if (item.value == '3' && item.isChoosed) {
            if (this.maxArray.length == 0) {
              this.maxArray = [...chartData.fFTAvg]
            }
            // 计算最大数组
            chartData.fFTRealtime.forEach((value, index) => {
              if (this.maxArray[index] < value) {
                this.maxArray[index] = value
              }
            })
            chartData.fFTMax = [...this.maxArray]
          } else if (item.value == '4' && item.isChoosed) {
            if (this.minArray.length == 0) {
              this.minArray = [...chartData.fFTAvg]
            }

            // 计算最小数组
            chartData.fFTRealtime.forEach((value, index) => {
              if (this.minArray[index] > value) {
                this.minArray[index] = value
              }
            })
            chartData.fFTMin = [...this.minArray]
          }
        })
      }

      // 处理整合好频谱、瀑布图数据
      if (!this.formatStatus) {
        chartData.fFTRealtime.forEach((item, index) => {
          // 填入频谱图数据
          if (chartData.fFTAvg) {
            // 平均曲线
            if (chartData.mode == 'pinyu') {
              temArr1.push(initStart + index * increase)
            } else {
              temArr1.push(index)
            }
            temArr1.push(chartData.fFTAvg[index])
          }
          if (chartData.fFTMax) {
            // 最大曲线
            temArr2.push(initStart + index * increase)
            temArr2.push(chartData.fFTMax[index])
          }
          if (chartData.fFTMin) {
            // 最小曲线
            temArr3.push(initStart + index * increase)
            temArr3.push(chartData.fFTMin[index])
          }
        })
      } else {
        chartData.fFTRealtime.forEach((item, index) => {
          // 填入频谱图数据
          if (chartData.fFTAvg) {
            // 平均曲线
            temArr1.push(index)
            temArr1.push(chartData.fFTAvg[index])
          }
          if (chartData.fFTMax) {
            // 最大曲线
            temArr2.push(index)
            temArr2.push(chartData.fFTMax[index])
          }
          if (chartData.fFTMin) {
            // 最小曲线
            temArr3.push(index)
            temArr3.push(chartData.fFTMin[index])
          }
        })
      }

      // let acc = 0
      chartData.pubuData.forEach((item, index) => {
        // if (item > -70) acc++

        // 实时数据 => 绘制瀑布图
        temArr4.push(startFreq + index * pubuIncrease)
        temArr4.push(item)
      })

      // console.log('大于-70的点数数量：', acc, chartData.pubuData.length)
      chartData.fFTAvg && this.$refs.specView.line.setData(temArr1)
      chartData.fFTMax && this.$refs.specView.line2.setData(temArr2)
      chartData.fFTMin && this.$refs.specView.line3.setData(temArr3)
      this.$refs.specView.chart.refresh()
      // console.log('瀑布图实时数据:', temArr4)
      if (this.isFirst) {
        this.isFirst = false
      }
      this.$refs.pubuView.series.addRowData(temArr4, timestamp)
      this.$refs.pubuView.chart.refresh()
    },
    // 设置折线/瀑布图X轴当前区间
    changeInterval (mode) {
      if (!this.isReq) return
      if (mode == 'pinyu') {
        this.$refs.specView.series.changeXInterval([
          this.xAxisMin,
          this.xAxisMax
        ])
      } else {
        this.$refs.specView.series.changeXInterval([0, this.pointNum])
      }

      this.$refs.pubuView.series.setMaxXInterval([
        this.xAxisMin,
        this.xAxisMax
      ])
    },
    // 设置折线/瀑布图X轴最大区间
    changeMaxInterval (mode) {
      if (this.initXAxisMin !== null) {
        if (mode == 'pinyu') {
          this.$refs.specView.series.setMaxXInterval([
            this.initXAxisMin,
            this.initXAxisMax
          ])
        } else {
          this.$refs.specView.series.setMaxXInterval([0, this.pointNum])
        }

        this.$refs.pubuView.series.setMaxXInterval([
          this.initXAxisMin,
          this.initXAxisMax
        ])
      } else {
        if (mode == 'pinyu') {
          this.$refs.specView.series.setMaxXInterval([
            this.xAxisMin,
            this.xAxisMax
          ])
        } else {
          this.$refs.specView.series.setMaxXInterval([0, this.pointNum])
        }
        this.$refs.pubuView.series.setMaxXInterval([
          this.xAxisMin,
          this.xAxisMax
        ])
      }

      this.changeInterval(mode)
    },
    // 频谱图鼠标移动时的回调函数
    specViewMouseMove (x, y, event) {
      // console.log('进来了')
      // that.throttle(() => {
      // this.overLayTop = event.layerY + 5
      // this.overlayLeft = event.layerX + 5

      const xValue = x.toFixed(2)
      const yValue = this.$refs.specView.line.getYData(xValue)

      if (yValue !== null) {
        // console.log("折线图鼠标当前位置:", xValue, yValue);
        let value1
        /* if (this.formatStatus) {
            value1 =
              ((xValue * (this.xAxisMax - this.xAxisMin)) / this.temMax +
                this.xAxisMin) /
              1000
          } else {
            value1 = xValue / 1000
          } */

        if (this.formatStatus) {
          value1 =
            (this.xAxisMin +
              (this.xAxisMax - this.xAxisMin) * (xValue / this.pointNum)) /
            1000
        } else {
          value1 = xValue / 1000
        }

        // 点击切换按钮后格式化X轴，暂时用不到
        if (this.isChange) {
          /* value1 = this.getXFormattVal(
              value1 * 1000,
              this.chooseSignal.split('-')[0]
            ) */
        }

        if (this.mode == 'pinyu') {
          this.$refs.specView.series.setMouseClickPosition(
            x,
            y,
            '频率: ' + value1.toFixed(6) + 'MHz',
            '强度: ' + yValue.toFixed(2) + 'dBm'
            // '射频: ' + value1.toFixed(2) + 'MHz' // this.anteInfo.lo + value1.toFixed(2) + 'MHz' // 这是计算天线给的信息，暂时用不到
          )
        } else {
          this.$refs.specView.series.setMouseClickPosition(
            x,
            y,
            '索引: ' + (value1 * 1000).toFixed(0),
            '强度: ' + yValue.toFixed(2) + 'dBm'
            // '射频: ' + value1.toFixed(2) + 'MHz' // this.anteInfo.lo + value1.toFixed(2) + 'MHz' // 这是计算天线给的信息，暂时用不到
          )
        }
      }
    },
    specViewMouseLeave (event) {
      // console.log('离开了')
      this.$refs.specView.series.setMouseClickPosition(-9999, -9999)
    },
    // 瀑布图鼠标移动时的回调函数
    pubuViewMouseMove (x, y, event) {
      // debugger
      const date = new Date(y)
      const hour =
        date.getHours().toString().length > 1
          ? date.getHours()
          : '0' + date.getHours()
      const minutes =
        date.getMinutes().toString().length > 1
          ? date.getMinutes()
          : '0' + date.getMinutes()
      const seconds =
        date.getSeconds().toString().length > 1
          ? date.getSeconds()
          : '0' + date.getSeconds()
      const str = hour + ':' + minutes + ':' + seconds
      this.pubuxValue = x.toFixed(2)
      this.pubuyValue = str
      if (this.pubuyValue) {
        this.pubuzValue = this.$refs.pubuView.series.getYData(this.pubuxValue)
        if (this.pubuzValue !== null) {
          const value1 = this.pubuxValue / 1000
          if (this.isChange) {
            /* value1 = this.getXFormattVal(
                value1 * 1000,
                this.chooseSignal.split('-')[0]
              ) */
          }

          this.$refs.pubuView.series.addTooltip({
            value1,
            value2: this.pubuzValue,
            left: this.$refs.pubuView.$refs.pubuContainer.clientWidth,
            top: 10
          })
        }
      }
    },
    // 频谱图鼠标点击事件
    specViewMouseClick (x, y, event) {
      // console.log('event', x, y, event)
      // this.xClickValue = x.toFixed(2);
      // this.yClickValue = y.toFixed(2);

      // 判断是否点击到了矩形图的中间，如果是的话，触发载波列表行点击事件
      this.zaiboList.some((item) => {
        const start = 1000 * (item.center * 1 - item.bandwidth / 2)
        const end = 1000 * (item.center * 1 + item.bandwidth / 2)
        if (x < end && x > start) {
          this.clickZaiboList(item)
          return true
        }
      })
      const index = this.$refs.specView.line.getIndex(x.toFixed(2))
      /* getZaiboInfoAPI({
        index,
        deviceIp: this.deviceIp,
        port: this.devicePort
      })
        .then((res) => {
          // console.log('载波检测信息', res.data)
          if (res.data) {
            this.zaiBoForm.bandwidth = res.data.bandwidth
            this.zaiBoForm.center = res.data.center
            this.zaiBoForm.snr = res.data.snr
            this.zaiBoForm.electLevel = res.data.electLevel
          } else {
            this.zaiBoForm = {
              bandwidth: '',
              center: '',
              snr: '',
              electLevel: ''
            }
          }
        })
        .catch((err) => {
          console.log(err)
        }) */
    },
    // 频谱图X轴坐标范围变化时的回调
    async specViewXIntervalChange (newInterval) {
      // this.$refs.pubuView.series.changeXInterval(newInterval)
      // console.log(newInterval[1].toFixed(0) / 1000 - newInterval[0].toFixed(0) / 1000)
      // 扫宽小于0.25KHz时，不下发请求了，单纯的缩放
      const span =
        newInterval[1].toFixed(0) / 1000 - newInterval[0].toFixed(0) / 1000
      // console.log('span', span)
      if (span < 0.25 || !this.isPlay) {
        this.isReq = false
      } else {
        if (this.isReq == false) this.isReq = true
        /* if (
          (this.scanForm.startFre = newInterval[0].toFixed(0) / 1000) &&
          this.scanForm.stopFre == newInterval[1].toFixed(0) / 1000
        ) {
          return
        }
        // 使用防抖函数，使其在缩放结束0.3s后再去调接口改数据
        this.timerFlag && clearTimeout(this.timerFlag)
        this.timerFlag = setTimeout(async () => {
          try {
            const temInerval = newInterval
            this.scanForm.startFre = temInerval[0].toFixed(0) / 1000
            this.scanForm.stopFre = temInerval[1].toFixed(0) / 1000
            // 修改中心频点下发指令
            this.changeCenterFre()
          } catch (error) {
            console.log(error)
          }
        }, 300) */
      }
    },
    // 瀑布图X轴坐标范围变化时的回调
    pubuViewXIntervalChange (newInterval) {
      // this.$refs.specView.series.changeXInterval(newInterval)
    },
    changeCenterFre () {
      // console.log('修改频谱区间：', this.scanForm.startFre, this.scanForm.stopFre)
      this.scanForm.span =
        (this.scanForm.stopFre - this.scanForm.startFre).toFixed(3) * 1
      if (this.scanForm.span < 0.25) {
        // console.log('扫宽', this.scanForm.span)
        this.scanForm.span = 0.25
      } else {
        this.isReq = true
      }

      this.scanForm.center =
        (this.scanForm.stopFre - this.scanForm.span / 2).toFixed(3) * 1
      // console.log('中心频点', this.scanForm.center)
      this.scanUnit.span = 'MHz'
      this.scanUnit.center = 'MHz'
      // console.log(this.scanForm.span, this.scanForm.center)
      this.changeRbwVBW()
    },
    // 带宽改变后，修改分辨率、和视频带宽
    async changeRbwVBW () {
      // const val = this.getValue(this.scanForm.span, this.scanUnit.span, 'MHz')
      const originStart =
        this.scanForm.center - this.scanForm.span * 1.5 < this.minBandWidth
          ? this.minBandWidth
          : this.scanForm.center - this.scanForm.span * 1.5
      const originEnd =
        this.scanForm.center + this.scanForm.span * 1.5 > this.maxBandWidth
          ? this.maxBandWidth
          : this.scanForm.center + this.scanForm.span * 1.5
      const val = originEnd - originStart

      this.scanUnit.rbw = 'Hz'

      if (val <= 0.49) {
        this.scanForm.rbw = 50
        this.settingForm.rbw = 50
        this.scanForm.vbw = 1
      } else if (val <= 1.1) {
        this.scanForm.rbw = 80
        this.settingForm.rbw = 80
        this.scanForm.vbw = 2
      } else if (val <= 1.9) {
        this.scanForm.rbw = 100
        this.ssettingFormrbw = 100
        this.scanForm.vbw = 3
      } else if (val <= 3) {
        this.scanForm.rbw = 150
        this.ssettingFormrbw = 150
        this.scanForm.vbw = 5
      } else if (val <= 6) {
        this.scanForm.rbw = 300
        this.ssettingFormrbw = 300
        this.scanForm.vbw = 10
      } else if (val <= 9) {
        this.scanForm.rbw = 500
        this.ssettingFormrbw = 500
        this.scanForm.vbw = 15
      } else if (val <= 20) {
        this.scanForm.rbw = 500
        this.ssettingFormrbw = 500
        this.scanForm.vbw = 20
      } else if (val <= 39) {
        this.scanForm.rbw = 700
        this.ssettingFormrbw = 700
        this.scanForm.vbw = 25
      } else if (val <= 210) {
        this.scanForm.rbw = 1000
        this.scsettingFormbw = 1000
        this.scanForm.vbw = 50
      } else if (val <= 530) {
        this.scanForm.rbw = 2000
        this.scsettingFormbw = 2000
        this.scanForm.vbw = 100
      } else if (val <= 1300) {
        this.scanForm.rbw = 3000
        this.scsettingFormbw = 3000
        this.scanForm.vbw = 150
      } else {
        this.scanForm.rbw = 3000
        this.scsettingFormbw = 3000
        this.scanForm.vbw = 150
      }
      // 下发参数
      await this.sweepConfig()
    },
    // 查询扫频参数并赋值
    async getParams () {
      try {
        // #region
        // 清空频谱图和瀑布图的内容
        // this.$refs.specView.line.setData([])
        // this.$refs.specView.line2 && this.line2.setData([])
        // this.$refs.specView.line3 && this.line3.setData([])
        // this.$refs.pubuView.series.clearData()
        // #endregion
        await this.$nextTick()
        // 扫频模式
        const { data } = await getParamsAPI({
          deviceIp: this.deviceIp,
          port: this.devicePort
        })

        // console.log('data', data)
        if (!data) return

        // #region
        /* if (
            this.initStart != data.deviceStart ||
            this.initEnd != data.deviceEnd
          ) {
            this.initStart = data.deviceStart
            this.initEnd = data.deviceEnd
            this.changeMaxInterval()
          } */
        // #endregion
        this.initXAxisMin = data.deviceStart
        this.initXAxisMax = data.deviceEnd

        this.minBandWidth = data.deviceStart / 1000
        this.maxBandWidth = data.deviceEnd / 1000

        this.changeMaxInterval()

        this.center = data.center / 1000
        this.span = data.span / 1000
        this.scanForm.center = data.center / 1000
        this.scanForm.rbw = data.rbw
        this.scanForm.vbw = data.vbw
        // this.scanForm.smooth = data.smooth
        this.scanForm.span = data.span / 1000

        this.settingForm.rbw = data.rbw
        this.settingForm.smooth = data.smooth
        this.settingForm.chufa = data.chufa

        if (data.detectType) {
          const temArr = data.detectType.split(',')
          // console.log('扫频temArr', temArr)
          this.typeOptions.forEach((item) => {
            temArr.some((innerItem) => {
              if (item.value === innerItem) {
                item.isChoosed = true
                return true
              }
            })
          })
        }
        this.scanUnit = {
          center: 'MHz', // 中心频点单位
          span: 'MHz', // 扫频宽度单位
          startFre: 'MHz', // 起始频率单位
          stopFre: 'MHz', // 终止频率单位
          rbw: 'Hz' // 分辨率率单位
        }

        this.changeFre()

        this.sweepConfig()
        const { data: data1 } = await getPubuMaxMinAPI({
          deviceIp: this.deviceIp,
          port: this.devicePort
        })
        // console.log('瀑布Y轴极值', data1)
        this.pubuMinFull = data1.pubuMin

        this.changeLine()
        this.getSaveStatus()
      } catch (error) {
        console.log(error)
        // this.$message.error('操作失败！')
      }
    },
    // 配置扫频参数
    async sweepConfig () {
      try {
        const center = this.getValue(
          this.scanForm.center,
          this.scanUnit.center,
          'KHz'
        )
        const span =
          this.getValue(this.scanForm.span, this.scanUnit.span, 'KHz').toFixed(
            0
          ) * 1
        this.span = span / 1000
        this.center = center / 1000
        const originStart =
          center - span * 1.5 < this.minBandWidth * 1000
            ? this.minBandWidth * 1000
            : center - span * 1.5

        const originEnd =
          center + span * 1.5 > this.maxBandWidth * 1000
            ? this.maxBandWidth * 1000
            : center + span * 1.5

        await sweepConfigAPI({
          center: (center / 10).toFixed(0) * 10,
          span: (span / 10).toFixed(0) * 10,
          rbw:
            this.scanUnit.rbw === 'Hz'
              ? this.scanForm.rbw
              : this.scanForm.rbw * 1000,
          vbw: this.scanForm.vbw,
          originStart,
          originEnd,
          deviceIp: this.deviceIp,
          port: this.devicePort
        })
        this.changeFitFlag()
        // this.$message.success('配置成功！')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    getValue (val, type1, type2) {
      if (!val) return null
      if (type1 === type2) {
        return val
      } else {
        if (type1 === 'KHz') {
          if (type2 === 'MHz') {
            return val / 1000
          } else {
            return val / 1000000
          }
        } else if (type1 === 'MHz') {
          if (type2 === 'KHz') {
            return val * 1000
          } else {
            return val / 1000
          }
        } else {
          if (type2 === 'KHz') {
            return val * 1000000
          } else {
            return val * 1000
          }
        }
      }
    },
    changeFitFlag () {
      this.fitFlag = true
    },
    // 修改起止频率
    changeFre () {
      this.scanForm.startFre =
        this.getValue(this.scanForm.center, this.scanUnit.center, 'MHz') -
        this.getValue(this.scanForm.span, this.scanUnit.span, 'MHz') / 2
      this.scanForm.stopFre =
        this.getValue(this.scanForm.center, this.scanUnit.center, 'MHz') +
        this.getValue(this.scanForm.span, this.scanUnit.span, 'MHz') / 2
    },
    changeLine () {
      this.$nextTick(() => {
        // 扫频模式
        if (!this.detectType.includes('2')) {
          this.showLine('line', false)
        } else {
          this.showLine('line', true)
        }
        if (!this.detectType.includes('3')) {
          this.showLine('line2', false)
        } else {
          this.showLine('line2', true)
        }
        if (!this.detectType.includes('4')) {
          this.showLine('line3', false)
        } else {
          this.showLine('line3', true)
        }
      })
    },
    showLine (line, bool) {
      // console.log(line, bool)
      this.$refs.specView[line].setVisible(bool)
    },
    checkCenter () {
      if (isNaN(this.center)) {
        this.center = this.minBandWidth
      } else {
        this.center = Math.max(
          this.minBandWidth,
          Math.min(this.maxBandWidth, Number(this.center))
        ) // 在范围内时保持原值，否则取最小值或最大值
      }

      const span = this.span
      const center = this.center
      if (center - span / 2 < this.minBandWidth) {
        this.span = (center - this.minBandWidth) * 2
      } else if (center + span / 2 > this.maxBandWidth) {
        this.span = (this.maxBandWidth - center) * 2
      }

      this.scanForm.startFre = this.center - this.span / 2
      this.scanForm.stopFre = this.center + this.span / 2
      this.changeCenterFre()
    },
    checkSpan () {
      if (isNaN(this.span)) {
        this.span = 0.25
      } else {
        this.span = Math.max(
          0.25,
          Math.min(this.maxBandWidth - this.minBandWidth, Number(this.span))
        ) // 在范围内时保持原值，否则取最小值或最大值
      }

      const span = this.span
      const center = this.center
      if (center - span / 2 < this.minBandWidth) {
        this.center = this.minBandWidth + span / 2
      } else if (center + span / 2 > this.maxBandWidth) {
        this.center = this.maxBandWidth - span / 2
      }

      this.scanForm.startFre = this.center - this.span / 2
      this.scanForm.stopFre = this.center + this.span / 2
      this.changeCenterFre()
    },
    async changeZaibo () {
      try {
        if (this.showZaibo) {
          // 正在展示载波列表 => 停止
          await stopSignalDetectAPI()
        } else {
          // 没有展示载波列表 => 开始
          await startSignalDetectAPI({
            deviceIp: this.deviceIp,
            port: this.devicePort,
            deviceId: this.deviceId
          })
        }
        if (this.showZaibo) this.$refs.specView.series.clearXmarkZone()
        this.showZaibo = !this.showZaibo
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
      /* setZaiboStausAPI({ status: this.showZaibo })
          .then((res) => {})
          .catch((err) => {
            console.log(err)
          }) */
    },
    // 改变测量状态
    changeMeasure (axis) {
      if (axis == 'x') {
        this.isMeasureX = !this.isMeasureX

        if (this.isMeasureX) {
          this.$refs.specView.series.setFreqMeasureOpen(true)
        } else {
          this.$refs.specView.series.setFreqMeasureOpen(false)
        }
      } else {
        this.isMeasureY = !this.isMeasureY
        if (this.isMeasureY) {
          this.$refs.specView.series.setSNRMeasureOpen(true)
          this.$refs.pubuView.series.setTimeMeasureOpen(true)
        } else {
          this.$refs.specView.series.setSNRMeasureOpen(false)
          this.$refs.pubuView.series.setTimeMeasureOpen(false)
        }
        this.$refs.specView.chart.refresh()
        this.$refs.pubuView.chart.refresh()
      }
    },
    // 存储状态查询
    async getSaveStatus () {
      try {
        const { data } = await getSaveStatusAPI()
        // console.log('存储状态', data)
        this.isSaving = data.saveStatus
      } catch (error) {
        console.log(error)
      }
    },
    // 开始存储
    async startSaving () {
      try {
        if (!this.saveForm.time) {
          return this.$message.warning('请填写存储时间！')
        }
        // 处理用户输入的参数 value
        await startSaveAPI({
          deviceIp: this.deviceIp,
          port: this.devicePort,
          deviceId: this.deviceId,
          time: this.saveForm.time
        })
        this.isSaving = true
        this.savingDialog = false
        this.$message.success('配置成功！')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    // 停止存储
    async stopSaving () {
      try {
        await stopSaveAPI()
        this.isSaving = false
        this.$message.success('停止存储')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    // 修改展示曲线的类型
    async changeDetectType (val) {
      this.typeOptions.some((item) => {
        if (item.value === val) {
          item.isChoosed = !item.isChoosed
          return true
        }
      })

      if (!this.detectType.includes('2')) {
        this.showLine('line', false)
      } else {
        this.showLine('line', true)
      }
      if (!this.detectType.includes('3')) {
        this.showLine('line2', false)
        this.maxArray = []
      } else {
        this.showLine('line2', true)
      }
      if (!this.detectType.includes('4')) {
        this.showLine('line3', false)
        this.minArray = []
      } else {
        this.showLine('line3', true)
      }
      // this.sweepConfig()
      try {
        /* await changeDetectTypeAPI({
            deviceIp: this.deviceIp,
            port: this.devicePort,
            detectType: this.detectType.join(',')
          }) */
        // this.$message.success('配置成功！')
        this.changeFitFlag()
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    // 修改了参考电平，重新设置y轴区间 => 修改为之修改瀑布图区间的方法
    changeYRange (max, min) {
      // console.log('瀑布图峰值', max, min)
      this.$refs.pubuView.series.setValueInterval(min, max)
    },
    // 打开设置窗口
    async settingPinpu () {
      this.showSetting = true
      await this.$nextTick()
      if (this.chartType == 1) {
        // 回放模式
        this.$refs.filePlayback.getFilePlayback(this.deviceId)
      }
    },
    async setPinpu (val) {
      try {
        if (val == 'rbw') {
          await rbwConfigAPI({
            rbw: this.settingForm.rbw,
            deviceIp: this.deviceIp,
            port: this.devicePort
          })
        } else if (val == 'smooth') {
          await smoothConfigAPI({
            smooth: this.settingForm.smooth,
            deviceIp: this.deviceIp,
            port: this.devicePort
          })
        } else if (val == 'chufa') {
          await chufaConfigAPI({
            chufa: this.settingForm.chufa,
            deviceIp: this.deviceIp,
            port: this.devicePort
          })
        }
        this.changeFitFlag()
      } catch (error) {
        console.log(error)
        this.$message.error('配置失败！')
      }
    },
    changePlayStatus () {
      if (this.isPlay) {
        this.formatStatus = true
        this.getNewData = false
      } else {
        this.formatStatus = false
      }
      setTimeout(() => {
        this.isPlay = !this.isPlay
        // if (!this.isPlay) console.log('暂停变量切换了')
      }, 100)
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
    },
    clickZaiboList (row, column, event) {
      if (this.selectedRow && this.selectedRow.center == row.center) {
        this.selectedRow = null
      } else {
        this.selectedRow = row
      }

      this.$refs.specView.series.clearXmarkZone()
      this.zaiboList.forEach((item) => {
        // console.log('item', item)
        const start = 1000 * (item.center * 1 - item.bandwidth / 2)
        const end = 1000 * (item.center * 1 + item.bandwidth / 2)
        const str = '' // item.center
        if (item.center == row.center && this.selectedRow) {
          this.$refs.specView.series.addXMarkZoneFocus(start, end, str, {
            r: 212 / 255,
            g: 74 / 255,
            b: 62 / 255,
            a: 0.5
          })
        } else {
          this.$refs.specView.series.addXMarkZoneFocus(start, end, str, {
            r: 255 / 255,
            g: 255 / 255,
            b: 255 / 255,
            a: 0.5
          })
        }
      })
    },
    // 选中行高亮显示
    getRowClassName ({ row, rowINdex }) {
      return this.selectedRow && this.selectedRow.center === row.center
        ? 'selected-row'
        : ''
    },
    getXFormattVal (value, val) {
      const result = this.mapValue(val)
      const outputVal =
        ((value / 1000 - 950) * (result[1] - result[0])) / 1200 + result[0]
      return outputVal.toFixed(2)
    },
    mapValue (val) {
      switch (val) {
        case 'C':
          return [3400, 4200]
        case 'KuL':
          return [10750, 11750]
        case 'KuH':
          return [10750, 12750]
        case 'X':
          return [7250, 7750]
        default:
          return [950, 2150]
      }
    },
    async setPlaybackSpeed (speed) {
      try {
        await setPlaybackSpeedAPI(speed)
        this.$message.success('切换至' + speed + '倍速！')
      } catch (error) {
        console.log('error', error)
        this.$message.error('切换失败！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detialCharts {
  display: flex;
  flex-direction: column;
  position: relative;
  // background-color: #000;

  .detialChart {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 1px solid #797979;
    position: relative;
    .linesCtl {
      position: absolute;
      right: 25px;
      bottom: 40px;
      width: 60px;
      height: 24px;
      line-height: 24px;
      font-size: 16px;

      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: nowrap;
      &.playback {
        width: 610px;
      }

      .item {
        min-width: 50px;
        background-color: rgba(60, 60, 60, 0.8);
        color: #90a8a8;
        cursor: pointer;
        z-index: 99;
        border-radius: 5px;
        font-family: "楷体";
        text-align: center;

        &.active {
          background-color: rgba(77, 96, 129, 0.8);
          color: #fff;
        }
      }
    }

    ::v-deep .el-table {
      background-color: #000;
    }

    ::v-deep .el-table th {
      background-color: #313131 !important;
      color: #ebf2f3 !important;
    }
    ::v-deep .el-table td {
      cursor: pointer;
      height: 20px;
      background-color: #000;
      color: #ebf2f3;
    }

    ::v-deep .el-table__body-wrapper {
      height: 29vh;
      overflow-y: auto;
    }

    ::v-deep .el-pagination {
      text-align: center;

      .el-pagination__total {
        color: #fff !important;
      }
    }

    ::v-deep .el-pagination.is-background .el-pager li {
      background-color: transparent !important;
      color: #fff !important;

      &.active {
        color: #409eff !important;
      }
    }

    ::v-deep .selected-row td {
      background-color: #4d6081;
      color: #fff;
    }
  }

  .tagLeft {
    position: absolute;
    left: 60px;
    top: 3px;
    // width: 220px;
    height: 24px;
    line-height: 24px;
    background-color: #000;
    color: #9bb3b3;
    font-size: 12px;
    text-align: left;
  }

  .tag {
    position: absolute;
    right: 35px;
    top: 3px;
    // width: 220px;
    height: 24px;
    line-height: 24px;
    background-color: #000;
    color: #9bb3b3;
    font-size: 12px;
    text-align: right;
  }

  .setting {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    height: 60px;
    font-family: "楷体";
    position: relative;

    ::v-deep .el-input-number--mini {
      width: 100px;
      .el-input__inner {
        background-color: transparent;
        color: #fff;
      }
    }

    ::v-deep .el-button {
      background-color: #205f76;
      width: 60px;
      border-radius: 5px;
    }

    ::v-deep .el-select .el-input-number--mini .el-input__inner {
      background-color: transparent;
      color: #fff;
    }

    .info {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translate(-50%, 0);
    }
  }
}

.settingDialog {
  .formItem {
    display: flex;
    margin-bottom: 20px;
    .label {
      width: 80px;
      text-align: right;
      height: 32px;
      line-height: 32px;
      margin-right: 10px;
    }
  }
}
</style>
